<template>
  <div class="wrapper">
    <div class="form">
      <div class="item">
        <span>银行卡号</span>
        <input type="tel" v-model="bankCard" placeholder="请输入银行卡号">
      </div>
      <div class="item">
        <span>银行名称</span>
        <input type="text" v-model="bank" placeholder="请输入银行名称">
      </div>
      <div class="item">
        <span>开户行</span>
        <input type="text" v-model="openBank" placeholder="请输入开户行">
      </div>
      <div class="item">
        <span>预留姓名</span>
        <input type="text" v-model="name" placeholder="请输入预留姓名">
      </div>
      <div class="item">
        <span>预留电话</span>
        <input type="text" v-model="mobile" placeholder="请输入预留电话">
      </div>
    </div>
    <button class="submit" @click="submit">提交</button>
  </div>
</template>

<script>
  import _ from 'lodash'
  import { mapState } from 'vuex'
  export default {
    name: 'BankAdd',
    created() {
      this.$route.params.id != 'none' && this._get()
    },
    data() {
      return {
        bankCard: '',
        bank: '',
        openBank: '',
        name: '',
        mobile: ''
      }
    },
    computed: {
      ...mapState(['openId']),
      urlApi() {
        return this.$route.params.id == 'none' ? '/v1/bank/increase' : '/v1/bank/modify'
      }
    },
    methods: {
      async _get() {
        let { data: { code, data } } = await this.$axios({
          url: '/v1/bank/details',
          method: 'GET',
          params: {
            id: this.$route.params.id,
            openid: this.openId
          }
        })
        if (code === 0) {
          this.bankCard = data.number
          this.bank = data.bank
          this.openBank = data.address
          this.name = data.name
          this.mobile = data.phone
        }
      },
      submit() {
        let mobile = /^1(3|4|5|6|7|8|9)\d{9}$/
        if(!this.bankCard || isNaN(this.bankCard)) {
          this.$toast('请正确填写银行卡号')
          return
        }
        if(!this.bank) {
          this.$toast('请填写银行名称')
          return
        }
        if(!this.openBank) {
          this.$toast('请填写开户行')
          return
        }
        if(!this.name) {
          this.$toast('请填写预留姓名')
          return
        }
        if(!this.mobile) {
          this.$toast('请填写预留电话')
          return
        }
        if(!mobile.test(this.mobile)) {
          this.$toast('请正确填写预留电话')
          return
        }
        this._submit()
      },
      _submit: _.throttle(async function() {
        let { data: { code, data } } = await this.$axios({
          url: this.urlApi,
          method: 'POST',
          data: {
            number: this.bankCard,
            bank: this.bank,
            address: this.openBank,
            name: this.name,
            phone: this.mobile,
            id: this.$route.params.id,
            openid: this.openId
          }
        })
        if (code === 0) {
          this.$toast(data)
          setTimeout(() => {
            this.$router.go(-1)
          }, 1500)
        }
      }, 2000, { trailing: false })
    }
  }
</script>

<style lang="scss" scoped>
  @import '@/assets/css/base.scss';
  .wrapper {
    min-height:100vh;
    padding-top: 0.2rem;
    background: #eee;
  }
  .form {
    padding: 0 0.2rem;
    font-size: 0.24rem;
    background: #fff;
  }
  .item {
    display: flex;
    align-items: center;
    /* padding: 0.2rem 0; */
    border-bottom: 1px solid $bgGray;
    span {
      display: block;
      flex: 0 0 1.4rem;
      width: 1.4rem;
      margin-right: 0.4rem;
    }
    input {
      flex: 1;
      display: block;
      font-size: 0.24rem;
      line-height: 0.9rem;
    }
  }
  .submit {
    display: block;
    margin: 0.4rem auto;
    padding: 0.2rem;
    width: 80%;
    border-radius: 5px;
    border:none;
    color: #fff;
    background: $colorRed;
    font-size: 0.28rem;
  }
</style>
